<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件属性(data和methods)</title>
    <script src="./src/vue.js"></script>
</head>
<body>
    <div id="app">
        <component-a></component-a>
    </div>
</body>
<script>
    // 封装一个局部注册组件
    var component_a = {
        template: '<div>组件内容：{{ num }}<a href="#" @click="change_num">改变num的值</a></div>',
        // data必须是一个function!!!
        data: function () {
            return {
                num: 1
            }
        },
        methods: {
            change_num: function () {
                this.num = 10;
            }
        }
    }

    // 创建Vue对象
    var vm = new Vue({
        el: "#app",
        // 组件注册
        components: {
            'component-a': component_a
        }
    })
</script>
</html>